<template lang="pug">
  el-drawer.commonDrawer(
    title="选择模版"
    size="880px"
    :visible="visibleDialog"
    append-to-body
    direction="rtl"
    @close="$_handleCancel"
  )

    el-row(:gutter="12" v-loading="loading")
      el-col(:span="8")
        .tplNameBox
          p(
            v-for="item in tplList"
            :key="item.id"
            :class="{'active': tplId === item.id}"
          )
            el-link(
              :underline="false"
              class="tplName"
              @click="tplId = item.id"
              )
              span.dot
              | {{item.name}}
      el-col(:span="16")
        .box
          s-table(
            ref="table"
            :dataPops="tempRecords"
            :column="recordColumn"
            size="small"
            border
            :show-header="false"
          )
            template(slot="timeRange" slot-scope="text, scope")
              template(v-if="!scope.edit") {{scope.begin}} ~ {{scope.end}}
              el-time-picker(
                v-else
                style="width: 100%"
                is-range
                v-model="editRecord.timeRange"
                range-separator="至"
                size="small"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                value-format="HH:mm:ss"
                @change="timeChange"
              )
            template(slot="activityContent" slot-scope="text, scope, index")
              template(v-if="!scope.edit")
                el-button.mr5(icon="el-icon-edit" @click="() => editHandle(index, scope)" type="primary" size="mini" circle)
                | {{text}}
              el-button(
                v-else
                type="primary"
                size="large"
                @click="editRecord.visible = true"
              ) 选择课程
        footer.tr
          el-button.gradientVertical(size="large" @click="delHandle" round) 删除此模板
          el-button.gradientVertical(size="large" @click="sureHandle" round) 确定
    course-selector(v-model="editRecord.visible" :initCourse.sync="editRecord" @sureHandle="saveCord")
</template>
<script>
import { mapGetters } from 'vuex'
import { formatTimestamp } from '@/utils/date'
import { recordColumn } from './config'
import { getTemps, delTemps } from '../../api'
import CourseSelector from '../courseSelector'

export default {
  components: {
    CourseSelector
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      tplId: '',
      tplList: [],
      recordColumn,
      tempRecords: [],
      editRecord: {
        visible: false,
        begin: '',
        end: '',
        timeRange: []
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    visibleDialog (val) {
      if (val) {
        this.getData()
      }
    },
    tplId: {
      handler (val) {
        const { tplList } = this
        if (val) {
          this.tempRecords = tplList.find(x => x.id === val)?.tempRecords || []
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取模板列表
    getData () {
      this.loading = true
      getTemps({ areaId: this.curArea.areaId }).then(res => {
        this.tplList = (res || []).map(x => {
          const obj = {
            ...x.nurseryScheduleTemp,
            tempRecords: (x.tempRecords || []).map(item => {
              item.begin = formatTimestamp(item.beginDate, 'time')
              item.end = formatTimestamp(item.endDate, 'time')
              return item
            })
          }
          return obj
        })
        this.tplId = this.tplList[0]?.id
      }).finally(() => {
        this.loading = false
      })
    },
    // 编辑行
    editHandle (index, scope) {
      const { tempRecords } = this
      tempRecords.forEach(x => {
        x.edit = false
      })
      tempRecords[index].edit = true
      this.tempRecords = [...tempRecords]
      console.log(scope)
      this.editRecord = {
        ...scope,
        visible: false,
        timeRange: [new Date(scope.begin ? `1990-01-01 ${scope.begin}` : scope.beginDate), new Date(scope.end ? `1990-01-01 ${scope.end}` : scope.endDate)]
      }
    },
    // 编辑时间选择
    timeChange (val) {
      console.log(val)
      if (val) {
        const { editRecord } = this
        editRecord.begin = val[0]
        editRecord.end = val[1]
        this.editRecord = { ...editRecord }
      }
    },
    // 编辑课程选择
    saveCord (course) {
      const { tempRecords } = this
      this.tempRecords = tempRecords.map(x => {
        if (x.edit) {
          x = course
          x.edit = false
        }
        return x
      })
    },
    // 选择模板
    sureHandle () {
      const { tempRecords } = this
      if (!tempRecords.length) {
        this.$message.error('请选择模板')
        return
      }
      this.$emit('sureHandle', tempRecords)
      this.$_handleCancel()
    },
    // 删除模板
    delHandle () {
      const { tplId } = this
      delTemps({ id: tplId }).then(() => {
        this.$message.success('删除成功')
        this.tplId = ''
        this.tempRecords = []
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.tplNameBox{
  max-height: calc(100vh - 76px);
  overflow: auto;

  > p {
    height: 60px;
    line-height: 60px;
    position: relative;
    padding: 0 80px 0 20px;

    a {
      padding: 0 30px 0 42px;
      display: block;
      position: relative;

      span.dot{
        content: '';
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        left: 24px;
        top: 50%;
        margin-top: -4px;
        background: #999999;
        transform: rotate(45deg);
      }
    }

    &.active{

      a{
        background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
        color: #fff;

        span.dot{
          background: #fff
        }

        &::before{
          content: '';
          position: absolute;
          display: block;
          border-top: 15px solid #fff;
          border-right: 5px solid #fff;
          border-bottom: 15px solid transparent;
          border-left: 5px solid transparent;
          right: 0;
          top: 0
        }

        &::after{
          content: '';
          position: absolute;
          display: block;
          border-top: 15px solid transparent;
          border-left: 5px solid transparent;
          border-bottom: 15px solid #fff;
          border-right: 5px solid #fff;
          right: 0;
          bottom: 0
        }
      }
    }
  }

  a.tplName {
    font-size: 13px;
  }
}

.box{
  max-height: calc(100vh - 146px);
  margin: 0 20px;
  position: relative;
  overflow: auto;

  + footer{
    position: absolute;
    bottom: 0;
    right: 16px;
    height: 48px;
  }

  ::v-deep{
    .tableBox{
      margin-top: 0;

      td {
        height: 60px;
        font-size: 15px;
      }
    }

    .tableWrapper{
      padding: 0
    }
  }

}
</style>
